<style scope>

</style>
<template>
    <span>
        <a-button  type="primary" :loading="loadingBool" icon="archive" :disabled="selectId.length==0" @click="outTrue">
            导出列表
        </a-button>

      <!--导出条数-->
        <!--<a-modal
          v-model="excel"
          title="导出条数"
          width="40%"
          :closable="false"
        >
            <div style="text-align: center;">
                <a-input-number :max="20000" style="width: 60%;" :min="1" v-model="pageNum" placeholder="请输入导出条数"></a-input-number>
            </div>

            <div slot="footer">

                <a-button type="ghost" @click="cancel" style="margin-left: 8px">取消</a-button>
                <a-button type="primary" :loading="outLoading" @click="getlistExcel(pageNum)">导出</a-button>
            </div>
        </a-modal>-->
        <Table style="display: none;" ref="tables" :columns="columns" :data="dates"></Table>
    </span>

</template>

<script>
  import { Table } from 'iview';
  export default {
    name: 'TableExport',
    components:{
      Table
    },
    props: {
      dates:Array,
      columns:Array,
      outName:String,
      selectId:Array
    },
    data() {

      return {
        searchtext:'',
        pageNum:1,//导出条数
        excel:false,
        outLoading:false,
        loadingBool:false,
      }
    },
    //检测表格数据改变时导出数据
    /* watch:{
         'dates'(val,oldVal){
             // console.log(val);
             // console.log(oldVal);
             this.exportData(val);
         }
     },*/
    methods: {
      //取消导出
      cancel(){
        // this.dates = [];
        this.excel = false;
      },

      //导出列表
      getlistExcel(pageNum){
        this.$emit('childGetList', pageNum);
        var _this =this;
        _this.outLoading = true;

        /* setTimeout(function () {
             _this.exportData();
         },5000);*/
        /*this.nextTick(function(){
            alert('数据已经更新')
        });*/

        /*this.$nextTick(function(){
            console.log(_this.dates);
            // alert('v-for渲染已经完成')
            // _this.exportData();
            console.log(this.$el.textContent)
        })*/

      },
      //表格导出
      exportData(data) {
        var _this = this;
        this.$refs.tables.exportCsv({
          filename: _this.outName,
          columns: this.columns,
          data:data
        });
        this.pageNum=1;
        this.outexl=false;
        this.excel=false;
        this.outLoading = false;
      },
      //点击导出表格
      outTrue(){
        var _this = this;
        _this.loadingBool = true;
        var exportArr=[];
        for(var i = 0;i<_this.dates.length;i++){
          for(var j=0;j<_this.selectId.length;j++){

            if(_this.dates[i].loginDate!=undefined){
              _this.dates[i].loginDate = "\t"+_this.dates[i].loginDate;
            }

            if(_this.dates[i]){
              exportArr.push(_this.dates[i]);
            }
          }

        }
        this.$refs.tables.exportCsv({
          filename: _this.outName,
          columns: this.columns,
          data:exportArr
        });
        _this.loadingBool = false;
        // this.excel = true;
        // this.dates = [];
      },












      callMethod() {
        this.$emit('childMethod', 'childParam');
        //第一个参数名为调用的方法名，第二个参数为需要传递的参数
      },
      search() {
        var _this = this;
        this.$emit('childSearch', _this.searchtext);
        //第一个参数名为调用的方法名，第二个参数为需要传递的参数
      },
      back(){
        this.$emit('childback', "000");
      },
      //
    },
    mounted() {


    }
  };
</script>
